<template>
  <div class="cpjyxjlBox">
    <!-------------------- 吹瓶机运行记录 -------------------->
    <TableHeader
      :data="{
        mainTitle: '灌装机操作记录',
        date: '2021年12月12日',
        company: '青岛崂山矿泉水有限公司',
        code: 'LK-QF-LS1-10-012-11-01',
      }"
    />
    <lb-table
      border
      :data="tableData1"
      highlight-current-row
    >
    </lb-table>
    <RowColTable border :data="tableData3" />
      <TableHeader
      :data="{
        subTitle: '班 前、班 后 消 毒 记 录',
      }"
    />
    <lb-table
      border
      :data="tableData2"
      :merge="[]"
    >
    </lb-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData1: {
        column: [
          {
            prop: "value0",
            label: "产品名称",
            align: "center",
            // fixed: true,
            // // width: '120',
            // renderHeader: (h, scope) => {
            //   return <span>{scope.column.label}</span>;
            // },
          },
          {
            label: "开机时间",
            align: "center",
            prop: "value1",
          },
          {
            label: "停机时间",
            align: "center",
            prop: "value2",
          },
          {
            label: "PET瓶损耗数量",
            align: "center",
            prop: "value3",
          },
          {
            prop: "value4",
            align: "center",
            label: "瓶盖损耗数量",
          },
        ],
        data: [],
      },
      tableData2: {
        column: [
          {
            prop: "value0",
            label: "项目",
            align: "center",
          },
          {
            prop: "value1",
            label: "工艺要求",
            align: "center",
          },
          {
            label: "执行情况",
            align: "center",
            prop: "value2",
          },
        ],
        data: [],
      },
      tableData3: {
        type: [
          { value: "date", label: "检查项目" },
          { value: "date", label: "时间" },
        ],
        column: [
          {
            prop: "value1",
            label: "灌装容量",
          },
          {
            prop: "value2",
            label: "压盖",
          },
          {
            prop: "value3",
            label: "水质",
          },
          {
            prop: "value4",
            label: "冲盖终端过滤器压力",
          },
          {
            prop: "value5",
            label: "灌装终端过滤器压力",
          },
          {
            prop: "value6",
            label: "真空泵运行情况",
          },
          {
            prop: "value7",
            label: "真空泵压力",
          },
          {
            prop: "value8",
            label: "一道冲盖水压力",
          },
          {
            prop: "value9",
            label: "坯身温度（℃）",
          },
          {
            prop: "value10",
            label: "二道冲盖水压力",
          },
        ],
        data: [
          {
            date: "2012-12-12",
            value1: "111",
            value2: "111",
            value3: "111",
            value4: "111",
            value5: "111",
            value6: "111",
            value7: "111",
            value8: "111",
            value9: "111",
            value10: "111",
            value11: "111",
            value12: "111",
            value13: "111",
            value14: "111",
          },
        ],
      },
    };
  },
  created() {
    for (let i = 0; i < 4; i++) {
      this.tableData1.data.push({
        value0: "0",
        value1: 0,
        value2: "2",
        value3: "3",
        value4: "4",
        value5: 0,
        value6: 6,
      });
      this.tableData2.data.push({
        value0: 1345,
        value1: 213,
        value2: 213,
      });
      this.tableData3.data.push({
        date: "2012-12-12",
        value1: "111",
        value2: "111",
        value3: "111",
        value4: "111",
        value5: "111",
        value6: "111",
        value7: "111",
        value8: "111",
        value9: "111",
        value10: "111",
        value11: "111",
        value12: "111",
        value13: "111",
        value14: "111",
      });
    }
  },
  methods: {
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      // console.log(row, column, rowIndex, columnIndex);
      if (rowIndex % 2 === 0) {
        if (columnIndex === 0) {
          // return [2, 2];
        }
      }
      // if (rowIndex === 0) {
      if (columnIndex <= 0) {
        return [1, 2];
      }
      // }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.cpjyxjlBox {
  width: 100%;
  // background: red;
}
</style>>

